<ti-halfmodal #modal1 id="halfmodal-basic1">
  <p>这是一个不带遮罩的弹窗</p>
</ti-halfmodal>

<ti-halfmodal #modal2 id="halfmodal-basic2" [nomaskCloseable]="false">
  <p>这是一个不带遮罩的弹窗，点击页面其他区域不会关闭弹窗</p>
</ti-halfmodal>

<ti-halfmodal #modal3 id="halfmodal-basic3" width="500px" clientRectTop="100px" [closeIcon]="false">
  <p>这是一个定制化的弹窗，宽度：500px 、距浏览器上边距：100px 、关闭图标：无</p>
</ti-halfmodal>

<h4 class="mb-3">1.打开一个不带遮罩的弹窗，点击页面其他区域会关闭弹窗</h4>
<button id="halfmodal-basic-button1" tiButton (click)="click(modal1)">打开半屏弹窗</button>

<h4 class="my-3">2.打开一个不带遮罩的弹窗，配置 nomaskCloseable 为 false ，点击页面其他区域不会关闭弹窗</h4>
<button id="halfmodal-basic2-button2" tiButton (click)="click(modal2)">打开半屏弹窗</button>

<h4 class="my-3">3.打开一个定制化的弹窗，宽度：500px 、距浏览器上边距：100px 、关闭图标：无</h4>
<button id="halfmodal-basic2-button3" tiButton (click)="click(modal3)">打开半屏弹窗</button>
